<!DOCTYPE html>
<html>
<head>
    <title>Scale options</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.dataviz.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
            <div id="example" class="k-content">
            <div class="configuration k-widget k-header" style="width:190px;">
                <span class="configHead">Gauge</span>
                <ul class="options">
                    <li>
                        <input id="labels" checked="checked" type="checkbox" autocomplete="off">
                        <label for="labels">Show labels</label>
                    </li>

                    <li>
                        <input id="labels-inside" type="radio" value="inside" name="labels-position" checked="checked">
                        <label for="labels-inside">- inside the gauge</label>
                    </li>

                    <li>
                        <input id="labels-outside" type="radio" value="outside" name="labels-position">
                        <label for="labels-outside">- outside of the gauge</label>
                    </li>

                    <li>
                        <input id="ranges" checked="checked" type="checkbox" autocomplete="off">
                        <label for="ranges">Show ranges</label>
                    </li>
                </ul>
            </div>

            <div id="gauge-container">
                <div id="gauge"></div>
            </div>

            <script>
                function createGauge(labelPosition) {
                    $("#gauge").kendoRadialGauge({
                        theme: $(document).data("kendoSkin") || "default",

                        pointer: {
                            value: 65
                        },

                        scale: {
                            minorUnit: 5,
                            startAngle: -30,
                            endAngle: 210,
                            max: 180,
                            labels: {
                                position: labelPosition || "inside"
                            },
                            ranges: [
                                {
                                    from: 80,
                                    to: 120,
                                    color: "#ffc700"
                                }, {
                                    from: 120,
                                    to: 150,
                                    color: "#ff7a00"
                                }, {
                                    from: 150,
                                    to: 180,
                                    color: "#c20000"
                                }
                            ]
                        }
                    });
                }

                $(document).ready(function() {
                    createGauge();

                    $(".configuration").bind("change", refresh);

                    $(document).bind("kendo:skinChange", function(e) {
                        createGauge();
                    });

                    window.configuredRanges = $("#gauge").data("kendoRadialGauge").options.scale.ranges;
                });

                function refresh() {
                    var gauge = $("#gauge").data("kendoRadialGauge"),
                        showLabels = $("#labels").prop("checked"),
                        showRanges = $("#ranges").prop("checked"),
                        positionInputs = $("input[name='labels-position']"),
                        labelsPosition = positionInputs.filter(":checked").val(),
                        options = gauge.options;

                    options.transitions = false;
                    options.scale.labels.visible = showLabels;
                    options.scale.labels.position = labelsPosition;
                    options.scale.ranges = showRanges ? window.configuredRanges : [];

                    gauge.redraw();
                }
            </script>

            <style scoped>
                #gauge-container {
                    background: transparent url("../../content/dataviz/gauge/gauge-container.png") no-repeat 50% 50%;
                    width: 404px;
                    height: 404px;
                    text-align: center;
                    margin: 0 0 30px 50px;
                }

                #gauge {
                    width: 330px;
                    height: 330px;
                    margin: 0 auto 0;
                }
            </style>
        </div>


</body>
</html>
